<template>
  <div class="login">
    <vue-particles
      color="#64f4e5"
      :particleOpacity="0.3"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="30"
      linesColor="#64f4e5"
      :linesWidth="1"
      :lineLinked="false"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="7.5"
      :hoverEffect="true"
      hoverMode="false"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    ></vue-particles>
    <el-form ref="form" :model="form" :rules="rules" class="form">
      <el-form-item>
        <img :src="avatarUrl" class="login-img">
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="用户名" prefix-icon="el-icon-s-custom"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          placeholder="密码"
          type="password"
          @keydown.enter.native="sign('form')"
          prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="btn" @click="sign('form')">登录</el-button>
      </el-form-item>
      <el-form-item>
        <span>还没有账号?</span>
        <a href="javascript:;" @click="reGister()">点击注册</a>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
//引入头像
import avatarUrl from "@/assets/images/大脑府.jpg";
//引入登入请求
import { login } from "@/api/";
export default {
  data() {
    return {
      avatarUrl,
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    sign(formName) {
      let _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          //打开loading动画
          setTimeout(() => {
            //表示验证通过
            //传递用户名和密码到服务
            login(_this.form).then(res => {
              if (res.data.state) {
                //关闭登入动画
                loading.close();
                //登入成功之后要做的事情
                //1.保存token到localstorage
                //2.保存昵称到localstorage
                localStorage.setItem("token", res.data.token);
                localStorage.setItem("nickname", res.data.userInfo.nickname);
                //初次登陆的时候设置nickname
                _this.$store.commit("setNickname", res.data.userInfo.nickname);
                _this.$router.push("/");
              } else {
                this.$message({
                  showClose: true,
                  message: "用户名或密码错误",
                  type: "error"
                });
                loading.close();
              }
            });
            const loading = _this.$loading({
              lock: true,
              text: "正在登入...",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)"
            });
          }, 200);
        }
      });
    },
    reGister() {
      this.$router.push("/register");
    }
  }
};
</script>
<style lang="scss" scoped>
.login {
  overflow-y: auto;
  width: 100%;
  height: 100%;
  background: rgb(50, 205, 171);
  position: fixed;
  .form {
    width: 400px;
    padding: 0px 40px 15px 40px;
    margin: 110px auto;
    background: #eff1f1;
    text-align: center;
    .login-img {
      position: relative;
      left: 10%;
      width: 120px;
      height: 120px;
      margin-left: -60px;
      margin-top: -60px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 10px solid #fff;
      box-shadow: 0 1px 5px #ccc;
      overflow: hidden;
    }
    .btn {
      width: 100%;
    }
  }
}
.lizi {
  position: absolute;
  width: 100%;
  height: 100%;
}
.el-form-item__content {
  text-align: center;
}
</style>
